<template>
    <el-container id="body">
        <!-- 界面 -->
        <el-header id="header" height="36px">
            <div style="width:36px">
            </div>
            <div>Lnyt</div>
            <div style="width:36px" @click="showUser()">
                <i class="iconfont icon-wode" style="font-size:28px" />
            </div>
        </el-header>
        <hr style="margin:0px; padding:0px">
        <el-main id="main">
            <router-view/>
        </el-main>
        <userInfo ref="userInfo"></userInfo>
    </el-container>
</template>

<script>
    import userInfo from '@/components/UserInfo.vue';

    export default {
        name: 'App',

        components: {
            userInfo
        },

        methods: {
            // 显示用户信息
            showUser: function showUser() {
                this.$refs.userInfo.showUser();
            }
        },

        data() {
            return {}
        }
    }

</script>

<style>
    #body {
        display: flex;
        height: 97vh;
    }

    #header {
        display: flex;
        justify-content: space-between;
        margin: 2px;
        padding: 0px;
        height: 36px;
    }

    #main {
        flex: 1;
        margin: 1px;
        padding: 1px;
    }

    #userDiag {}

</style>

